import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { PageHeader, Section, KV, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { Badge, ClaimBadge, ConfidenceBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
import { CountryActivity } from '@/components/country/activity';
import { TrendChart, type TrendSeries } from '@/components/charts/trend-chart';
import { getGeographyBySlug, coverageFor, yearsFor, allSitesObservations, topCancersFor, trendFor, geographyScopeCode, WHO_REGION_LABEL, SEXES, BURDEN_METRICS, type Sex, type TopCancersResult } from '@/lib/queries/geography';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import { loadProvenance, toInfo } from '@/lib/queries/provenance';
import { listSources } from '@/lib/queries/sources';
import { jsonLd } from '@/lib/seo';
import { SITE_URL, SITE_NAME } from '@/lib/site';
import { str, int, oneOf, type SP } from '@/lib/search-params';
import { fmtInt, fmtValue, humanize, toDate, unitLabel } from '@/lib/format';

export const revalidate = 3600;

type Params = { slug: string };

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const geo = await getGeographyBySlug((await params).slug);
  if (!geo) return { title: 'Not found' };
  return {
    title: `${geo.name} — cancer statistics`,
    description: `Cancer incidence and mortality observations for ${geo.name}: top cancers by annual deaths, new cases and age-standardized rates per year and sex, with trends and sources.`,
    alternates: { canonical: `/country/${geo.slug}` },
  };
}

/**
 * /country/[slug] (§47): header, latest-year summary, top-cancer tables per metric with sex/year selectors,
 * a multi-line trend of the top 8 cancers' age-standardized mortality, and a sources/freshness block.
 * Every value comes from epidemiology_observations; ranks from the matching ranking snapshot when it exists.
 */
export default async function CountryPage({ params, searchParams }: { params: Promise<Params>; searchParams: Promise<SP> }) {
  const { slug } = await params;
  const sp = await searchParams;
  const geo = await getGeographyBySlug(slug);
  if (!geo) notFound();
  const [coverage, years, sources] = await Promise.all([coverageFor(geo.id), yearsFor(geo.id), listSources()]);
  const latestYear = years[0];
  const sex = oneOf<Sex>(sp, 'sex', SEXES, 'all');
  const year = latestYear ? int(sp, 'year', latestYear, years[years.length - 1]!, latestYear) : null;
  const scopeCode = geographyScopeCode(geo);

  const crumbs = [{ label: 'Countries', href: '/countries' }, ...(geo.parent_slug && geo.parent_name && geo.kind === 'subdivision' ? [{ label: geo.parent_name, href: `/country/${geo.parent_slug}` }] : []), { label: geo.name }];

  if (!latestYear || year == null) {
    return (
      <div>
        <Breadcrumbs items={crumbs} className="pt-5" />
        <PageHeader kicker={humanize(geo.kind)} title={geo.name} lede={headerLede(geo)} />
        <EmptyState title="No epidemiology observation for this geography yet">
          Country statistics appear once a licensed registry connector has ingested observations for {geo.name}. IARC / GLOBOCAN (185 countries) is under license review and the SEER API awaits credentials.
          <div className="mt-1">
            <Link className="ci-link" href="/countries">
              Geographies with data
            </Link>
          </div>
        </EmptyState>
        <div className="mt-8 space-y-8">
          <CountryActivity iso2={geo.iso2} iso3={geo.iso3} name={geo.name} kind={geo.kind} />
        </div>
      </div>
    );
  }

  const [allSites, ...tops] = await Promise.all([allSitesObservations(geo.id, year, sex), ...BURDEN_METRICS.map((m) => topCancersFor(geo, m, year, sex, 40))]);
  const byMetric = new Map(tops.map((t) => [t.metric, t]));
  const asmr = byMetric.get('as_mortality_rate');
  const trendIds = (asmr?.rows.length ? asmr : byMetric.get('mortality_count'))?.rows.slice(0, 8).map((r) => r.cancer_id) ?? [];
  const trendMetric = asmr?.rows.length ? 'as_mortality_rate' : 'mortality_count';
  const trend = await trendFor(geo.id, trendMetric, sex, trendIds);
  const provIds = tops.flatMap((t) => t.rows.slice(0, 1).map((r) => r.provenance_id));
  const prov = await loadProvenance([...provIds, ...allSites.map((a) => a.provenance_id)]);

  const usedSources = [...new Set(coverage.map((c) => c.source_slug))].map((s) => sources.find((x) => x.slug === s)).filter((s): s is NonNullable<typeof s> => !!s);
  const freshest = coverage.map((c) => toDate(c.last_updated)).filter((d): d is Date => !!d).sort((a, b) => b.getTime() - a.getTime())[0] ?? null;
  const nCancers = Math.max(...coverage.map((c) => c.n_cancers), 0);
  const estimateTypes = [...new Set(coverage.flatMap((c) => c.estimate_types))];
  const standardPop = coverage.find((c) => c.standard_population)?.standard_population ?? null;

  const ld = {
    '@context': 'https://schema.org',
    '@type': 'Dataset',
    name: `Cancer incidence and mortality observations — ${geo.name}`,
    description: `Per-site cancer observations for ${geo.name} (${years[years.length - 1]}–${latestYear}): annual deaths, new cases and age-standardized rates by sex, as published by ${usedSources.map((s) => s.name).join('; ') || 'the source registry'}. Normalized by CancerIndex without changing values.`,
    url: `${SITE_URL}/country/${geo.slug}`,
    creator: { '@type': 'Organization', name: SITE_NAME, url: SITE_URL },
    isBasedOn: usedSources.map((s) => s.homepage ?? `${SITE_URL}/source/${s.slug}`),
    spatialCoverage: { '@type': 'Place', name: geo.name, ...(geo.iso3 ? { identifier: geo.iso3 } : {}) },
    temporalCoverage: `${years[years.length - 1]}/${latestYear}`,
    variableMeasured: [...new Set(coverage.map((c) => EPI_METRIC_LABEL[c.metric] ?? c.metric))],
    license: usedSources.map((s) => s.license).filter(Boolean).join('; ') || undefined,
    ...(freshest ? { dateModified: freshest.toISOString() } : {}),
  };

  const q = (over: Partial<{ sex: string; year: number }>) => {
    const p = new URLSearchParams();
    const s = over.sex ?? sex;
    const y = over.year ?? year;
    if (s !== 'all') p.set('sex', s);
    if (y !== latestYear) p.set('year', String(y));
    const qs = p.toString();
    return `/country/${geo.slug}${qs ? `?${qs}` : ''}`;
  };

  return (
    <article>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLd(ld) }} />
      <Breadcrumbs items={crumbs} className="pt-5" />
      <PageHeader kicker={humanize(geo.kind)} title={geo.name} lede={headerLede(geo)}>
        <KV
          className="mt-3 max-w-xl"
          items={[
            { k: 'ISO 3166-1', v: geo.iso3 ? <span className="ci-mono">{geo.iso3}{geo.iso2 ? ` · ${geo.iso2}` : ''}</span> : null },
            { k: 'WHO region', v: geo.who_region ? WHO_REGION_LABEL[geo.who_region] ?? geo.who_region : null },
            { k: 'Population', v: geo.population ? <span className="ci-num">{fmtInt(geo.population)}{geo.population_year ? ` (${geo.population_year})` : ''}</span> : <span className="text-ink-3">not seeded — CancerIndex shows only rates and counts published by the source</span> },
            { k: 'Years covered', v: <span className="ci-num">{years[years.length - 1]}–{latestYear}</span> },
            { k: 'Cancer entities', v: <span className="ci-num">{fmtInt(nCancers)}</span> },
            { k: 'Estimate types', v: estimateTypes.map((t) => <Badge key={t} tone={t === 'observed' ? 'ok' : 'warn'} className="mr-1">{t}</Badge>) },
          ]}
        />
      </PageHeader>

      {/* Selectors: sex + year (server-side URL state) */}
      <nav aria-label="Scope" className="flex flex-wrap items-center gap-x-6 gap-y-2 border-y border-rule py-2 text-[13px]">
        <div className="flex items-center gap-1.5">
          <span className="ci-kicker mr-1">Sex</span>
          {SEXES.map((s) => (
            <Link key={s} href={q({ sex: s })} aria-current={s === sex ? 'page' : undefined} className={`border px-2 py-0.5 no-underline ${s === sex ? 'border-accent bg-accent-soft text-accent-2' : 'border-rule text-ink-2 hover:border-accent'}`}>
              {s === 'all' ? 'Both sexes' : humanize(s)}
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="ci-kicker mr-1">Year</span>
          {years.slice(0, 8).map((y) => (
            <Link key={y} href={q({ year: y })} aria-current={y === year ? 'page' : undefined} className={`ci-num border px-2 py-0.5 no-underline ${y === year ? 'border-accent bg-accent-soft text-accent-2' : 'border-rule text-ink-2 hover:border-accent'}`}>
              {y}
            </Link>
          ))}
          {years.length > 8 ? (
            <details className="relative">
              <summary className="cursor-pointer border border-rule px-2 py-0.5 text-ink-2 hover:border-accent">earlier…</summary>
              <div className="absolute left-0 z-10 mt-1 flex max-w-[320px] flex-wrap gap-1 border border-rule-strong bg-paper p-2 shadow-lg">
                {years.slice(8).map((y) => (
                  <Link key={y} href={q({ year: y })} className={`ci-num border px-2 py-0.5 no-underline ${y === year ? 'border-accent bg-accent-soft text-accent-2' : 'border-rule text-ink-2 hover:border-accent'}`}>
                    {y}
                  </Link>
                ))}
              </div>
            </details>
          ) : null}
        </div>
      </nav>

      {/* Summary cards */}
      <Section id="summary" kicker="Summary" title={`${year} · ${sex === 'all' ? 'both sexes' : humanize(sex)} · all ages`} description="Totals across all cancer sites are shown only when the source publishes an all-sites row. Otherwise the per-site figures below stand on their own; CancerIndex never sums site groups (definitions overlap between sources).">
        {allSites.length ? (
          <ul className="grid grid-cols-1 gap-px bg-rule sm:grid-cols-2 lg:grid-cols-4">
            {allSites.map((a) => (
              <li key={a.metric} className="bg-paper px-3 py-2.5">
                <span className="text-[11.5px] font-medium uppercase tracking-wide text-ink-3">{EPI_METRIC_LABEL[a.metric] ?? a.metric} · all sites</span>
                <span className="mt-0.5 flex items-baseline gap-1.5">
                  <span className="ci-num font-display text-2xl">{fmtValue(a.value, a.unit)}</span>
                  <span className="text-[11.5px] text-ink-3">{unitLabel(a.unit)}</span>
                </span>
                <span className="block text-[11.5px] text-ink-3">
                  {a.year} · {a.site_definition}
                </span>
                <span className="mt-1 flex items-center gap-1.5">
                  <SourceBadge p={toInfo(prov.get(a.provenance_id)) ?? { sourceSlug: a.source_slug, sourceName: a.source_name }} />
                  <ClaimBadge kind="observed" />
                  {a.estimate_type !== 'observed' ? <Badge tone="warn">{a.estimate_type}</Badge> : null}
                </span>
              </li>
            ))}
          </ul>
        ) : (
          <ul className="grid grid-cols-1 gap-px bg-rule sm:grid-cols-2 lg:grid-cols-4">
            {BURDEN_METRICS.map((m) => {
              const t = byMetric.get(m);
              const top = t?.rows[0];
              return (
                <li key={m} className="bg-paper px-3 py-2.5">
                  <span className="text-[11.5px] font-medium uppercase tracking-wide text-ink-3">{EPI_METRIC_LABEL[m] ?? m}</span>
                  {top && t ? (
                    <>
                      <span className="mt-0.5 block text-[12px] text-ink-3">
                        highest site group{t.year !== year ? ` (${t.year}, latest available)` : ''}:
                      </span>
                      <Link href={`/cancer/${top.slug}`} className="ci-link block truncate text-[14px]">
                        {top.canonical_name}
                      </Link>
                      <span className="flex items-baseline gap-1.5">
                        <span className="ci-num font-display text-2xl">{fmtValue(top.value, top.unit)}</span>
                        <span className="text-[11.5px] text-ink-3">{unitLabel(top.unit)}</span>
                      </span>
                      <span className="mt-1 flex flex-wrap items-center gap-1.5">
                        <SourceBadge p={toInfo(prov.get(top.provenance_id)) ?? { sourceSlug: top.source_slug, sourceName: top.source_name }} />
                        <ClaimBadge kind="observed" />
                        <span className="text-[11px] text-ink-3">{fmtInt(t.rows.length)} site groups</span>
                      </span>
                    </>
                  ) : (
                    <span className="mt-1 block text-[12.5px] text-ink-3">no observation for {year}</span>
                  )}
                </li>
              );
            })}
          </ul>
        )}
        {!allSites.length ? <p className="mt-2 text-[12px] text-ink-3">No all-sites total in source for this scope — per-site figures below; no national total is computed.</p> : null}
      </Section>

      {/* Top tables */}
      {tops.map((t) => (
        <TopTable key={t.metric} t={t} year={year} sex={sex} scopeCode={scopeCode} prov={prov} geoSlug={geo.slug} />
      ))}

      {/* Trend */}
      <Section id="trend" kicker="Trend" title={`${EPI_METRIC_LABEL[trendMetric]} — top ${Math.min(8, trendIds.length)} cancers, all years`} description={`Top cancers of ${year} (${sex === 'all' ? 'both sexes' : humanize(sex)}) traced over every year published for ${geo.name}. Dashed lines mark estimated or projected values; the y axis starts at zero.`}>
        {trend.length ? (
          <>
            <TrendChart series={toSeries(trend)} unit={trend[0]!.unit} ariaLabel={`${EPI_METRIC_LABEL[trendMetric]} by year for the top ${trendIds.length} cancers in ${geo.name}`} yLabel={unitLabel(trend[0]!.unit)} />
            <p className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
              <SourceBadge p={{ sourceSlug: trend[0]!.source_slug }} compact />
              <ClaimBadge kind="observed" />
              {trend[0]!.standard_population ? <span>standard: {trend[0]!.standard_population}</span> : null}
              <span>{fmtInt(trend.length)} points</span>
            </p>
          </>
        ) : (
          <EmptyState compact>No multi-year series for this scope.</EmptyState>
        )}
      </Section>

      <CountryActivity iso2={geo.iso2} iso3={geo.iso3} name={geo.name} kind={geo.kind} />

      {/* Sources & freshness */}
      <Section id="sources" kicker="Provenance" title="Sources and freshness" description="What each source covers for this geography, exactly as ingested. Values are normalized (units, labels) but never changed.">
        <div className="ci-table-wrap">
          <table className="ci-table">
            <thead>
              <tr>
                <th>Source</th>
                <th>Metric</th>
                <th>Sex</th>
                <th className="num">Years</th>
                <th className="num">Cancers</th>
                <th>Estimate types</th>
                <th>Standard population</th>
                <th>Ingested</th>
              </tr>
            </thead>
            <tbody>
              {coverage.map((c) => (
                <tr key={`${c.source_slug}-${c.metric}-${c.sex}`}>
                  <td>
                    <SourceBadge p={{ sourceSlug: c.source_slug, sourceName: c.source_name }} compact />
                  </td>
                  <td>{EPI_METRIC_LABEL[c.metric] ?? c.metric}</td>
                  <td>{c.sex === 'all' ? 'Both' : humanize(c.sex)}</td>
                  <td className="num">
                    {c.min_year}–{c.max_year} <span className="text-ink-3">({c.n_years})</span>
                  </td>
                  <td className="num">{fmtInt(c.n_cancers)}</td>
                  <td>
                    {c.estimate_types.map((t) => (
                      <Badge key={t} tone={t === 'observed' ? 'ok' : 'warn'} className="mr-1">
                        {t}
                      </Badge>
                    ))}
                  </td>
                  <td className="text-[12px] text-ink-3">{c.standard_population ?? '—'}</td>
                  <td className="text-[12px] text-ink-3">{toDate(c.last_updated)?.toISOString().slice(0, 10) ?? '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <ul className="mt-3 space-y-1.5 text-[13px]">
          {usedSources.map((s) => (
            <li key={s.slug} className="flex flex-wrap items-center gap-2">
              <Link className="ci-link" href={`/source/${s.slug}`}>
                {s.name}
              </Link>
              <Badge tone={s.license_status === 'approved' ? 'ok' : 'warn'}>license: {s.license_status}</Badge>
              {s.license ? <span className="text-[12px] text-ink-3">{s.license}</span> : null}
            </li>
          ))}
        </ul>
        <Note>
          {standardPop ? `Age-standardized rates use the ${standardPop}; they are not comparable with rates standardized to the World (Segi) population used by IARC. ` : ''}
          Global comparisons are not available: the IARC Global Cancer Observatory remains under license review and the SEER API awaits credentials (CLAUDE.md §10.3-10.4). Only geographies with licensed observations get a page; see <Link className="ci-link" href="/countries">/countries</Link>.
        </Note>
        <Freshness dataUpdatedAt={freshest} sourceVersion={coverage.length ? `${years[years.length - 1]}–${latestYear}` : null} extra={`${fmtInt(coverage.reduce((n, c) => n + c.n_years * c.n_cancers, 0))} observations approx. · ranks from snapshots geo=${scopeCode}`} />
      </Section>
    </article>
  );
}

function headerLede(geo: { name: string; kind: string }) {
  return `Cancer incidence and mortality for ${geo.name} as published by the source registry: per site group, per year and sex, with age-standardized rates where the source provides them. Population statistics describe groups, never individuals.`;
}

function toSeries(points: Awaited<ReturnType<typeof trendFor>>): TrendSeries[] {
  const map = new Map<string, TrendSeries>();
  for (const p of points) {
    if (!map.has(p.cancer_id)) map.set(p.cancer_id, { key: p.cancer_id, name: p.canonical_name, href: `/cancer/${p.slug}/statistics`, points: [], dashed: false });
    const s = map.get(p.cancer_id)!;
    s.points.push({ x: Number(p.year), y: Number(p.value) });
    if (p.estimate_type !== 'observed') s.dashed = true;
  }
  // Order series by latest value descending so the legend matches the table.
  return [...map.values()].sort((a, b) => (b.points.at(-1)?.y ?? 0) - (a.points.at(-1)?.y ?? 0));
}

function TopTable({ t, year, sex, scopeCode, prov, geoSlug }: { t: TopCancersResult; year: number; sex: Sex; scopeCode: string; prov: Awaited<ReturnType<typeof loadProvenance>>; geoSlug: string }) {
  const label = EPI_METRIC_LABEL[t.metric] ?? t.metric;
  const first = t.rows[0];
  const ranked = t.rows.some((r) => r.rank != null);
  const scopeKey = t.year != null ? `geo=${scopeCode}|sex=${sex}|age=all|year=${t.year}|level=top` : null;
  return (
    <Section id={t.metric} kicker="Top cancers" title={`By ${label.toLowerCase()}`} description={t.year == null ? undefined : `${t.year}${t.year !== year ? ` — latest year available for this metric (${year} not yet published by the source)` : ''} · ${sex === 'all' ? 'both sexes' : humanize(sex)} · all ages · ${fmtInt(t.rows.length)} site groups${first?.standard_population ? ` · ${first.standard_population}` : ''}`}>
      {!first ? (
        <EmptyState compact>No {label.toLowerCase()} observation for this geography and sex.</EmptyState>
      ) : (
        <>
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th className="num">#</th>
                  <th>Cancer</th>
                  <th className="num">
                    {label} ({unitLabel(first.unit)})
                  </th>
                  <th className="num">95% CI</th>
                  <th>Type</th>
                  <th>Rank in scope</th>
                  <th>Site definition</th>
                  <th>Source</th>
                </tr>
              </thead>
              <tbody>
                {t.rows.map((r, i) => (
                  <tr key={r.cancer_id}>
                    <td className="num">{i + 1}</td>
                    <td>
                      <Link className="ci-link" href={`/cancer/${r.slug}`}>
                        {r.canonical_name}
                      </Link>
                      <span className="ml-1.5 text-[11px] text-ink-3">{humanize(r.entity_type)}</span>
                    </td>
                    <td className="num font-medium">{fmtValue(r.value, r.unit)}</td>
                    <td className="num text-ink-3">{r.lower_ci != null && r.upper_ci != null ? `${fmtValue(r.lower_ci, r.unit)}–${fmtValue(r.upper_ci, r.unit)}` : '—'}</td>
                    <td>
                      <Badge tone={r.estimate_type === 'observed' ? 'ok' : 'warn'}>{r.estimate_type}</Badge>
                    </td>
                    <td className="text-[12.5px]">
                      {r.rank != null && r.rank_scope_key ? (
                        <Link className="ci-link" href={`/rankings/${t.metric}?scope=${encodeURIComponent(r.rank_scope_key)}`} title={r.rank_scope_key}>
                          #{r.rank} of {fmtInt(r.eligible_entities)}
                        </Link>
                      ) : (
                        <span className="text-ink-4" title="No current ranking snapshot for this metric and scope">no snapshot</span>
                      )}
                    </td>
                    <td className="max-w-[260px] text-[11.5px] text-ink-3">{r.site_definition ?? '—'}</td>
                    <td>
                      <span className="inline-flex gap-1">
                        <SourceBadge p={toInfo(prov.get(r.provenance_id)) ?? { sourceSlug: r.source_slug, sourceName: r.source_name }} compact />
                        <ClaimBadge kind="observed" />
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {/* div, not p: the SourceBadge popover holds a <dl>, which would close a <p> in the HTML parser (hydration mismatch). */}
          <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
            <SourceBadge p={toInfo(prov.get(first.provenance_id)) ?? { sourceSlug: first.source_slug, sourceName: first.source_name }} />
            {ranked && scopeKey ? (
              <span>
                Rank from snapshot <span className="ci-mono">{scopeKey}</span> ·{' '}
                <Link className="ci-link" href={`/rankings/${t.metric}?scope=${encodeURIComponent(scopeKey)}`}>
                  full ranking and "Why this rank?"
                </Link>
              </span>
            ) : (
              <span>"#" is the position in this table; no ranking snapshot covers this scope yet.</span>
            )}
            {t.rows.every((r) => r.estimate_type === 'observed') ? <ConfidenceBadge level="HIGH" /> : <ConfidenceBadge level="MEDIUM" />}
            <Link className="ci-link" href={`/country/${geoSlug}?sex=${sex}&year=${t.year}#trend`}>
              trend ↓
            </Link>
          </div>
          <Freshness dataUpdatedAt={t.rows.map((r) => toDate(r.updated_at)).filter((d): d is Date => !!d).sort((a, b) => b.getTime() - a.getTime())[0] ?? null} sourceVersion={prov.get(first.provenance_id)?.dataset_version ?? null} />
        </>
      )}
    </Section>
  );
}